<template>
    <el-button plain type="primary" style="margin-bottom: 10px;" @click="Open()">添加</el-button>
    <el-button plain type="primary" style="margin-bottom: 10px;" @click="goinvoice()">开票</el-button>
    <el-button plain type="primary" style="margin-bottom: 10px;" @click="goTicket()">到票</el-button>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed type="index" label="序号" width="60" />
        <el-table-column prop="orderCode" label="订单编号" width="150" />
        <el-table-column prop="orderSon" label="下单人" width="150" />
        <!-- <el-table-column prop="orderState" label="订单状态" width="180" >
            <template v-slot="scopr">
                <span v-if="scopr.row.orderState==1">进行中</span>
                <span v-if="scopr.row.orderState==0">已完成</span>
            </template>
        </el-table-column> -->
        <el-table-column prop="orderNum" label="订单数量" width="180" />
        <el-table-column prop="orderGoods" label="下单商品" width="180" />
        <el-table-column prop="allmomeny" label="总金额" width="180" />
        <el-table-column prop="tomomeny" label="已到票金额" width="180" />


        <!-- <el-table-column fixed="right" label="操作" min-width="120">
            <template v-slot="scope">
                <el-button link type="warning" @click="">编辑</el-button>

            </template>
        </el-table-column> -->
    </el-table>
<!-- 添加订单弹窗 -->
  <el-dialog v-model="dialogVisible" title="添加订单" width="500px">
    <el-form ref="ruleFormRef" :model="ruleForm"  label-width="120px">
      
      <el-form-item label="下单人" prop="orderSon">
        <el-input v-model="ruleForm.orderSon" placeholder="请输入下单人" />
      </el-form-item>
      <el-form-item label="订单数量" prop="orderNum">
        <el-input type="number" v-model="ruleForm.orderNum"  placeholder="请输入订单数量" />
      </el-form-item>
        <el-form-item label="下单物品" prop="orderGoods">
        <el-input v-model="ruleForm.orderGoods" placeholder="请输入下单物品" />
      </el-form-item>
      <el-form-item label="应付金额" prop="allmomeny">
        <el-input v-model="ruleForm.allmomeny" placeholder="请输入应付金额" />
      </el-form-item>
      <el-form-item label="已付金额" prop="tomomeny">
        <el-input  v-model="ruleForm.tomomeny"  placeholder="请输入已付金额" />
      </el-form-item>
       <el-form-item label="客户" prop="clientId">
                <el-select v-model="ruleForm.clientId" placeholder="请选择客户">
                    <el-option v-for="item in clientdata" :label="item.clientName" :value="item.id" />
                </el-select>

            </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>


    <!--分页-->
    <el-pagination v-model:current-page="page.Index" v-model:page-size="page.Size" :page-sizes="[5, 10, 20, 30]"
        :background="true" layout="total, sizes, prev, pager, next, jumper" :total="page.totalcount" />
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, watch } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useCounterStore } from '@/stores/counter'
import { Watch } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
const router=useRouter()

const pinia = useCounterStore();
const tableData = ref([])

//产线向后端传参
const page = reactive({
    Index: 1,
    Size: 5,
    totalcount: 0
})
//车间向后端传参
watch(page, () => {
    GetWare()
})
//钩子
onMounted(() => {
    getclinet()
    GetWare()
})

//仓库显示
const GetWare = () => {
    axios.get('/api/InvoiceTicket/Getorder', { params: page }).then(res => {
        if (res.data.code == 200) {
            tableData.value = res.data.totalPage
            page.totalcount = res.data.totalcount
        }
    })
}
const dialogVisible = ref(false);
const Open = () => {
  dialogVisible.value = true;
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  "orderCode": "",
  "orderSon": "",
  "orderState": 0,
  "orderNum": "",
  "orderGoods": "",
  "allmomeny": "",
  "tomomeny": "",
  "clientId": "",
  "isOrder": true,
  "isDel": false,
  "createrPeople":"admin"
})

const clientdata=ref<any>([])
const getclinet=()=>{
    axios({
        url:'/api/Pulldown/GetClient',
        method:'get',

    })
    .then(res=>{
        clientdata.value=res.data.data
    })
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post('/api/InvoiceTicket/Addorder', ruleForm).then(res => {
        if (res.data.code == 200) {
          ElMessage.success(res.data.message);

            dialogVisible.value = false;
          GetWare(); // 提交成功后刷新表格数据
        } else {
          ElMessage.error(res.data.message)
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const goinvoice=()=>{
    router.push({
        path:"/upd"
    })
}

const goTicket=()=>{
    router.push({
        path:"/addcs"
    })
}

</script>

<style scoped>
.pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding: 10px;
    background-color: #f9fafb;
    border-radius: 8px;
}

.custom-pagination {
    --el-pagination-item-size: 32px;
    --el-pagination-item-bg: #ffffff;
    --el-pagination-item-color: #606266;
    --el-pagination-item-hover-color: #4096ff;
    --el-pagination-item-active-color: #ffffff;
    --el-pagination-item-active-bg: #4096ff;
    --el-pagination-border-radius: 6px;
    --el-pagination-margin: 0 5px;
}

.custom-pagination .el-pagination__prev,
.custom-pagination .el-pagination__next {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.custom-pagination .el-pagination__sizes {
    margin-right: 10px;
}

.custom-pagination .el-pagination__total {
    margin-right: 10px;
    color: #606266;
}

.custom-pagination .el-pagination__item {
    margin: 0 5px;
    border-radius: 6px;
    min-width: 32px;
    height: 32px;
    line-height: 32px;
}

.custom-pagination .el-pagination__item:hover {
    background-color: #f0f5ff;
}

.custom-pagination .el-pagination__item.is-active {
    background-color: #4096ff;
    color: #ffffff;
}
</style>
